<template>
  <Page title="搜题结果">
    <template v-slot:navBarCustom>
      <div class=""></div>
    </template>
    <template v-slot:content>
      <div class="w-full h-full p-20px box-border">
        <div class="container w-full h-full p-20px box-border bg-white flex flex-col">
          <div class="tips text-333 text-center">
            {{
              !isSearched
                ? '正在搜题...'
                : questions.length > 0
                ? `为你找到以下${questions.length}道相似题目`
                : '暂无相似题'
            }}
          </div>
          <div class="list mt-20px flex-1 overflow-scroll">
            <div
              class="item mt-20px p-20px box-border relative"
              :style="i.isExpand ? 'height:auto' : ''"
              v-for="(i, index) in questions"
              :key="i.questionId"
            >
              <div class="intro text-A3A3A3 flex items-center">
                <div class="question-type text-51C3FF px-8px py-2px">
                  {{ i.type.name }}
                </div>
                <span class="px-10px">|</span>
                <div class="flex items-center">
                  <span class="mr-6px">{{
                    i.difficultyLevel | diffcultyLevelName(questionDifficultyType)
                  }}</span>
                  <el-rate v-model="i.difficulty" disabled> </el-rate>
                </div>
                <span class="px-10px">|</span>
                {{ i.kpoints[0].name }}
              </div>

              <div class="question text-333 mt-18px">
                <div
                  class="stem"
                  :style="i.isExpand ? 'display:inherit' : ''"
                  v-html="i.stem"
                ></div>
                <div class="answer mt-14px" v-html="i.answer" v-show="i.isExpand"></div>
                <div class="explanation mt-14px" v-html="i.explanation" v-show="i.isExpand"></div>
              </div>
              <div class="expand absolute text-768895" @click="itemExpand(index)">
                {{ i.isExpand ? '收起详情' : '展开详情' }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/index'
import { getTextSearch, updateTextSearchTime } from '@/api/photoSearch'
import { mapState, mapActions } from 'vuex'
import { uploadImage } from '@/utils'

export default {
  components: {
    Page
  },
  filters: {
    diffcultyLevelName(difficultyLevel, types) {
      if (!difficultyLevel) return ''

      const type = types.find((type) => type.value == difficultyLevel)
      return type ? type.label : ''
    }
  },
  data() {
    return {
      // 累计时间
      cumulativeTime: {
        vm: this._self,
        timeout: null,
        // 单位：秒
        value: 0,
        // 累加
        run: function () {
          this.timeout = setTimeout(() => {
            this.value++
            this.run()
          }, 1000)
        },
        reset: function () {
          clearTimeout(this.timeout)
          this.value = 0
        }
      },
      searchQuestionId: '',
      questionDifficultyType: [],
      questions: [],
      isSearched: false // 是否搜索完成
    }
  },
  async created() {
    this.questionDifficultyType = await this.getDictByType('question_difficulty_type')

    this.init()
  },
  mounted() {
    this.cumulativeTime.run()
  },
  beforeDestroy() {
    if (!Number.isNaN(parseInt(this.searchQuestionId))) {
      updateTextSearchTime({
        searchQuestionId: this.searchQuestionId,
        studentDuration: !this.questions.length ? 0 : this.cumulativeTime.value
      })
    }
    this.cumulativeTime.reset()
  },
  methods: {
    ...mapActions(['getDictByType']),
    async init() {
      const { android_call } = window

      const onGotImageBase64 = (base64) => {
        getTextSearch({
          imageBase64: 'data:image/png;base64,' + base64
        }).then((res) => {
          this.isSearched = true
          const { data, msg: searchQuestionId } = res
          this.searchQuestionId = searchQuestionId

          if (!res.data || res.data.length <= 0) return

          this.questions = data.map((q) => {
            q['difficulty'] = this.getDifficulty(q.difficultyLevel)
            q['isExpand'] = false
            q['isCheck'] = false
            return q
          })
        })
      }

      if (!android_call) {
        const base64 = await uploadImage()
        onGotImageBase64(base64.replace('data:image/png;base64,', ''))
      } else {
        const callBackName = `fn${new Date().getTime()}`
        android_call[callBackName] = onGotImageBase64.bind(this)
        android.takePhoto(callBackName)
      }
    },
    itemExpand(index) {
      this.$set(this.questions[index], 'isExpand', !this.questions[index].isExpand)
    },
    getDifficulty(difficultyLevel) {
      switch (parseInt(difficultyLevel)) {
        case 17:
          return 1
        case 18:
          return 2
        case 19:
          return 3
        case 20:
          return 4
        case 21:
          return 5
        default:
          return 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  border-radius: 16px;

  .tips {
    font-size: 18px;
    line-height: 25px;
  }

  .list {
    .item {
      height: 156px;
      border-radius: 10px;
      border: 1px solid #e8e8e8;

      .intro {
        font-size: 16px;
        line-height: 22px;

        .question-type {
          font-size: 18px;
          line-height: 24px;
          background-color: rgba(81, 195, 255, 0.1);
          border-radius: 4px;
        }
      }

      .question {
        font-size: 20px;
        line-height: 28px;

        .stem {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .answer {
        }

        .explanation {
        }
      }

      .expand {
        font-size: 18px;
        line-height: 18px;
        right: 20px;
        bottom: 20px;
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>
